<template>
  <div class="pos">
    <el-row>
      <el-col :span='7' class="pos-order" id="order-list">
        <el-tabs>
          <el-tab-pane label="点餐">
            <el-table border style="width: 100%" :data="tableData">
              <el-table-column prop="goodsName" label="商品名称">
              </el-table-column>
              <el-table-column prop="count" label="数量" width="50">
              </el-table-column>
              <el-table-column prop="price" label="金额" width="70">
              </el-table-column>
              <el-table-column label="操作" width="150" fixed="right">
                <template scope="scope">
                  <el-button type="text" size="small" @click="addOrderList(scope.row)">
                    增加
                  </el-button>
                  <el-button type="text" size="small" @click="reduceGood(scope.row)">
                    减少
                  </el-button>
                  <el-button type="text" size="small" @click="delSingleGoods(scope.row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="totalDiv"><small>数量：</small>{{totalCount}}
              <small>金额：</small>{{totalMoney}}<small>元</small></div>
            <div class="order-btn">
              <el-button type="danger" @click="delAllGoods">删除</el-button>
              <el-button type="success" @click="checkout">结账</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="外卖">
            外卖
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span='17'>
        <div class="goods">
          <div class="title">常用商品</div>
          <div class="goods-list">
            <ul>
              <li v-for="goods in goodsDate " @click="addOrderList(goods)">
                <span>{{goods.goodsName}}</span>
                <span class="goods-price">{{goods.price}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="goods-type">
          <el-tabs>
            <el-tab-pane label="汉堡">
              <div>
                <ul class='cookList'>
                  <li v-for="goods in type0" @click="addOrderList(goods)">
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <span class="foodName">{{goods.goodsName}}</span>
                    <span class="foodPrice">{{goods.price}}</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>

            <el-tab-pane label="小食">
              <div>
                <ul class='cookList'>
                  <li v-for="goods in type1" @click="addOrderList(goods)">
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <span class="foodName">{{goods.goodsName}}</span>
                    <span class="foodPrice">{{goods.price}}</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="饮料">
              <div>
                <ul class='cookList'>
                  <li v-for="goods in type2" @click="addOrderList(goods)">
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <span class="foodName">{{goods.goodsName}}</span>
                    <span class="foodPrice">{{goods.price}}</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="套餐">
              <div>
                <ul class='cookList'>
                  <li v-for="goods in type3" @click="addOrderList(goods)">
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <span class="foodName">{{goods.goodsName}}</span>
                    <span class="foodPrice">{{goods.price}}</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "Pos",
    data() {
      return {
        tableData: [],
        goodsDate: [],
        type0: [],
        type1: [],
        type2: [],
        type3: [],
        totalMoney:0,
        totalCount:0,
      }
    },
    created: function () {
      axios.get('http://jspang.com/DemoApi/oftenGoods.php')
        .then(reponse => {
          this.goodsDate = reponse.data;
          // console.log();
        })
        .catch(error => {
          console.log(error);
        })
      axios.get('http://jspang.com/DemoApi/typeGoods.php')
        .then(reponse => {
          this.type0 = reponse.data[0];
          this.type1 = reponse.data[1];
          this.type2 = reponse.data[2];
          this.type3 = reponse.data[3];
          console.log('type',reponse.data[0], reponse.data[1], reponse.data[2], reponse.data[3]);
        })
        .catch(error => {
          console.log(error);
        })
    },
    mounted: function () {
      var orderHeight = document.body.clientHeight;
      document.getElementById('order-list').style.height = orderHeight + 'px';
    },
    methods: {
      //   tianjia
      addOrderList(goods) {

        // 判断商品是否存在
        let isHave = false;
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].goodsId == goods.goodsId) {
            isHave = true;
          }
        }
        if(isHave){
          let arr=this.tableData.filter(a=>a.goodsId==goods.goodsId);
          arr[0].count++;
        }else {
          console.log('goods',goods);
          let newGoods={
            goodsId:goods.goodsId,
            goodsName:goods.goodsName,
            price:goods.price,
            count:1,
          };
          this.tableData.push(newGoods);
        }
        this.summaryMoney();
      },
      reduceGood(goods){
        let isHave = false;
        if(goods.count>1){
          isHave=true
        }
        let arr=this.tableData.filter(a=>a.goodsId==goods.goodsId);
        if(isHave){
          arr[0].count--;
        }else {
          this.tableData=this.tableData.filter(o=>o.goodsId!=goods.goodsId);
        }
        this.summaryMoney();
      },
      delSingleGoods(goods){
        this.tableData=this.tableData.filter(o=>o.goodsId!=goods.goodsId);
        this.summaryMoney();
      },
      delAllGoods(){
        this.tableData=[];
        this.totalMoney=0;
        this.totalCount=0;
      },
      checkout(){
        if(this.totalCount!=0){
          this.tableData=[];
          this.totalMoney=0;
          this.totalCount=0;
          this.$message({
            message:'结账成功',
            type:'success'
          })
        }else {
          this.$message.error('不能空结')
        }
      },
      summaryMoney(){
        this.totalMoney=0;
        this.totalCount=0;
        if (this.tableData){
          this.tableData.forEach((e)=>{
            this.totalCount+=e.count;
            this.totalMoney=this.totalMoney+(e.price*e.count);
            // console.log(e);
          })
        }
      }
    }
  }
</script>

<style scoped>
  .pos-order {
    background: #f9fafc;
    border-right: 1px solid #c0ccda;
    height: 100%;
  }

  .order-btn {
    margin-top: 10px;
  }

  .title {
    height: 20px;
    border-bottom: 1px solid #d3dce6;
    background: #f9fafc;
    padding: 10px;
    text-align: left;
  }

  .goods-list ul li {
    list-style: none;
    float: left;
    border: 1px solid #277cfc;
    padding: 10px;
    background: #fff;
    margin: 0 10px 10px 0;
    cursor: pointer;
  }

  .goods-price {
    color: #18ffee;
    margin-left: 5px;
  }

  .goods-type {
    clear: both;
  }

  .cookList li {
    list-style: none;
    width: 23%;
    border: 1px solid #E5E9F2;
    height: auto;
    overflow: hidden;
    background-color: #fff;
    padding: 2px;
    float: left;
    margin: 2px;
    cursor: pointer;
  }

  .cookList li span {

    display: block;
    float: left;
  }

  .foodImg {
    width: 40%;
  }

  .foodName {
    font-size: 18px;
    padding-left: 10px;
    color: brown;

  }

  .foodPrice {
    font-size: 16px;
    padding-left: 10px;
    padding-top: 10px;
  }
  .totalDiv{
    background-color: #fff;
    padding: 10px;
    border-bottom: 1px solid #d3dcdf;
  }
</style>
